<template>
  <div>
    <div class="bgcUrl">
      <div class="demo-image__placeholder">
        <el-card v-for="item in categoryList" :key="item.id" shadow="hover" @click.native="toProperty">
          <h3 class="demonstration">{{ item.title }}</h3>
          <div class="block" fit="fill">
            <el-image :src="item.image"></el-image>
          </div>
          <p>描述：{{ item.desc }}</p>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
// import { categoriesList } from "@/api/agents";
export default {
  data() {
    return {
      src: "@/category/image/347389.jpg",
      categoryList: [
        {
          id: 1,
          title: "中央系列",
          image:
            "http://www.cccgrealestate.com/var/upload/pic/2019/04/20190412130329_98255.jpg",
        },
        {
          id: 2,
          title: "美庐系列",
          image: "http://www.cccgrealestate.com/var/upload/pic/2019/04/20190412130342_86643.jpg",
        },
        {
          id: 3,
          title: "雅郡系列",
          image: "http://www.cccgrealestate.com/var/upload/pic/2019/04/20190412130404_72042.jpg",
        },
        {
          id: 4,
          title: "香颂系列",
          image: "http://www.cccgrealestate.com/var/upload/pic/2019/04/20190412130419_51640.jpg",
        },
        {
          id: 5,
          title: "和风系列",
          image: "http://www.cccgrealestate.com/var/upload/pic/2019/04/20190412130433_67626.jpg",
        },
        {
          id: 6,
          title: "别墅系列",
          image: "http://www.cccgrealestate.com/var/upload/pic/2019/04/20190412130433_67626.jpg",
        },
      ],
    };
  },
  // async created() {
  //   const res = await categoriesList();
  //   console.log(33, res);
  //   this.categoryList = res.data;
  // },
  methods:{
    toProperty(){
      this.$router.push('/property')
    }
  }
};
</script>

<style lang="scss" scoped>
.bgcUrl {
  height: calc(100vh - 60px);
  background: url(~@/assets/common/347389.jpg) no-repeat;
  background-attachment: fixed;
  // opacity: 0.8;
  background-size: 100% 100%;
  position: relative;
  .demo-image__placeholder {
    width: 63%;
    margin: 0 auto;
    :hover {
      transform: scale(1.05); //原本的图片的大小，图片原来的大小不变
      transition: all 0.6s;
    }
    .el-card {
      display: inline-block;
      height: 265px;
      width: 22%;
      margin: 100px 50px 30px 50px;
      background-color: rgba(255, 255, 255, 0.6);
      h3 {
        text-align: center;
        margin-top: 0;
      }
      p {
        margin-bottom: 0;
      }
    }
  }
}
.demo-image__placeholder {
  .block {
    overflow: hidden;
    height: 150px;
    width: 200px;
  }
}
</style>